body, html{
			height: 100%;
			width: 100%;
			margin: 0%;
			padding: 0%; /* para ocultar el scroll bar de los navegadores web */ 
			/* como no todos tienen el mismo zoom inicial debo hacerlo para evitar que salga el scroll bar en algunos y en otros no*/
			background-color: indigo; 
		}

		#header1 {
			display: block;
			min-height: 10%;
			background-image: url(dreamlike-flowers.jpg);
			color: white;
			font-family: 'Lobster Two', cursive;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
		}
		#header1 p {
			margin: auto;
			text-align: center;
			font-size: 1.5em;
			font-weight: bolder;
		}


		.contenido{
			height: 2000px;
			padding-top: 1%;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
			-webkit-flex-flow: row wrap; /* es un shorthand de flex-direction y flex-wrap */
		}
		.contenido nav {
			order: 1;
			/* --------------------IMPORTANTE-----------------------------------------------------
			Esta orden da a entender que este elemento ocupará un espacio completo en el box que está*/
			flex: 1 200%; 

			background-image: url(elegant-grey-illumination.jpg);
			background-size: cover;
			color: white;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
			border-radius: 1em;
			margin-right: 1%;
		}
		.contenido nav p {
			margin: auto;
			font-size: 1.5em;
		}

		.contenido section {
			order: 1;
			flex: 10 1 10%;/* El primer numero es el número de divisiones de espacio que ocupará el elemento en 1 box, 
			para probar mover el numero 10 a numeros mas altos o bajos*/
			background-image: url(dreamlike-flowers.jpg);
			background-size: cover;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column; 
			border-radius: 3% 3%;
		}

		/* ASIDE */
		.contenido aside {
			order: 2;
			flex: 1 1 10%;
			border-radius: 1em;
			margin-left: 1%;
			text-align: center;
			color: white;
			font-weight: bolder;
			font-size: 1em%;
			background-image: url(antique-scroll.jpg);
			background-size: cover;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column;
			padding: 1%;
		}
		.contenido aside img {
			margin: 3% 0% 8% 5%;

		}


		/**********************************/
		/* Elementos internos del section */
		/**********************************/

		/* HEADER SECTION */
		.presentacion {
			order: 1;
			flex: 1 6 10%;
			margin-top: 2%; 
			margin-bottom: 1%; 
			background-color:rgba(250,250,250,.5);
			border-radius: 12.5%;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
		}
		.presentacion img {
			order: 2;
			flex: 1 6 10%;
			margin-right: 10%;
			border-radius: 5%;
			max-height: 100px;


		}
		.presentacion p {
			order 2;
			flex: 6 1 10%;
			font-family: 'Lora', serif;
			font-size: 1.5em;
			margin: 2%;

		}


		/* ARTICLE SECTION */
		.curriculum{
			order: 2;
			flex: 3 15 20%;
			background-color:rgba(250,250,250,.5); 
			border-radius: 12.5%;
		}
		.curriculum p {
			margin-left: 5%;
			font-family: 'Lora', serif;
			text-align: justify;
			font-size: 100%;

		}

		/* FOOTER SECTION */
		.RecursosFavoritos{
			order: 3;
			flex: 15 1 75%;
			background-color:rgba(250,250,250,.5);
			margin-top: 1%; 
			margin-bottom: 1%;
			border-radius: 5%;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column;
		}

		.RecursosFavoritos h3 {
			display: block;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 1.5em;
			font-weight: bolder;
			text-align: center;
			margin: 4%;
			border: 3px solid black;
			border-radius: 0.5em;
		}

		.RecursosFavoritos .recursos {
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
		}
		.RecursosFavoritos .recursos .horizontal {
			border: 0px;
			background-color: transparent;
			max-width: 99.5%;
			max-height: 560px;
			margin: 1% 0.5%;
		}
		.RecursosFavoritos .recursos .vertical {
			padding: 1%;
			border: 1% solid indigo;
			background-color: white;
			min-height: 30%;
			min-width: 90%;
			margin: 3%
		}
		iframe {
			margin: 1%;
		}

		.footerprincipal	{
			display: block;
			min-height: 10%;
			background-image: url(circles-on-wave-line.jpg);
			background-position: 25% 40%;
			background-size: cover;
			color: white;
			font-family: 'Lobster Two', cursive;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
			margin: 0.5%;
			border-radius: 0.5em;
		}
		.footerprincipal p 	{
			margin: auto;
			font-size: 1em;
			font-weight: bolder;
		}